<template>
  <div class="containerBox flexC">
    <div class="flex1 flex colorF JustifyContentSA textC font_s28">
      <p class="title titleAcitve flex AlignItemsC JustifyContentSA">
        <span class="titleNumber">2508</span>
        <span>检查数</span>
      </p>
      <p class="title flex AlignItemsC JustifyContentSA">
        <span class="titleNumber">212</span>
        <span>发现问题</span>
      </p>
      <p class="title flex AlignItemsC JustifyContentSA">
        <span class="titleNumber">4</span>
        <span>已整改</span>
      </p>
      <p class="title flex AlignItemsC JustifyContentSA">
        <span class="titleNumber">208</span>
        <span>整改中</span>
      </p>
    </div>
    <div class="flex4" style="margin-top: 0.825rem;">
      <ul class="flex colorF textC font_s20 subTitle">
        <li class="flex2">社团名称</li>
        <li class="flex2">检察人员</li>
        <li class="flex2">检查类型</li>
        <li class="flex2">检查时间</li>
        <li class="flex4">检查情况</li>
        <li class="flex2">处理结果</li>
      </ul>
      <div class="listBox scrollBar">
        <ul class="flex colorF textC font_s18 AlignItemsC listC listContent" v-for="item in dataList" :key="item.id">
          <li class="flex2">{{item.stmc}}</li>
          <li class="flex2">{{item.jcry}}</li>
          <li class="flex2">{{item.jclx}}</li>
          <li class="flex2">{{item.jcsj}}</li>
          <li class="flex4" style="padding: 0.825rem;">{{item.jcqk}}</li>
          <!-- <li class="flex4">{{item.jcqk}}</li> -->
          <li class="flex2">{{item.cljg}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataList: [
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致,由于注册地17年10月-2018年10月因政策要求，被部队收回，2018年年底才找到合适地址，预计2019年底营业。（附情况说明）', 'cljg': '基本及格' },
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致,由于注册地17年10月-2018年10月因政策要求，被部队收回，2018年年底才找到合适地址，预计2019年底营业。（附情况说明）', 'cljg': '基本及格' },
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致,由于注册地17年10月-2018年10月因政策要求，被部队收回，2018年年底才找到合适地址，预计2019年底营业。（附情况说明）', 'cljg': '基本及格' },
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致,由于注册地17年10月-2018年10月因政策要求，被部队收回，2018年年底才找到合适地址，预计2019年底营业。（附情况说明）', 'cljg': '基本及格' },
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致,由于注册地17年10月-2018年10月因政策要求，被部队收回，2018年年底才找到合适地址，预计2019年底营业。（附情况说明）', 'cljg': '基本及格' },
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致,由于注册地17年10月-2018年10月因政策要求，被部队收回，2018年年底才找到合适地址，预计2019年底营业。（附情况说明）', 'cljg': '基本及格' },
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致,由于注册地17年10月-2018年10月因政策要求，被部队收回，2018年年底才找到合适地址，预计2019年底营业。（附情况说明）', 'cljg': '基本及格' },
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致,由于注册地17年10月-2018年10月因政策要求，被部队收回，2018年年底才找到合适地址，预计2019年底营业。（附情况说明）', 'cljg': '基本及格' },
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致,由于注册地17年10月-2018年10月因政策要求，被部队收回，2018年年底才找到合适地址，预计2019年底营业。（附情况说明）', 'cljg': '基本及格' },
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致,由于注册地17年10月-2018年10月因政策要求，被部队收回，2018年年底才找到合适地址，预计2019年底营业。（附情况说明）', 'cljg': '基本及格' },
        { 'stmc': '上海时好口腔门诊部', 'jcry': '韩骊、朱竹均、李伟', 'jclx': '实地检查/抽查', 'jcsj': '2019年4月19日', 'jcqk': '1、机构所在地与注册地不一致', 'cljg': '基本及格' }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.containerBox {
  width: 95%;
  height: 95%;
  margin: 0 auto;
  .title {
    background-image: url(../../../assets/img/comprehensive/left/02.png);
    background-size: 100% 100%;
    width: 18%;
    font-weight: bold;
    .titleNumber {
      width: 5rem;
      margin-left: 0.825rem;
    }
  }
  .titleAcitve {
    background-image: url(../../../assets/img/comprehensive/left/01.png);
    background-size: 100% 100%;
  }
  .subTitle {
    font-weight: bold;
    // background-color: #1f44ae;
    background-color: rgba($color: #1f44ae, $alpha: 0.9);
    li {
      height: 3.625rem;
      line-height: 3.625rem;
    }
  }
  .listBox {
    height: 52vh;
    .listContent {
      background: rgba($color: #0e1e6b, $alpha: 0.8)
    }
    .listContent:nth-child(odd) {
      background: rgba($color: #103293, $alpha: 0.8)
    }
  }
  .scrollBar {
    overflow: auto;
  }
  .scrollBar::-webkit-scrollBar {
    width: 8px;
    border-radius: 10px;
    background-color: rgba($color: #ffffff, $alpha: 0.6)
  }
  .scrollBar::-webkit-scrollBar-thumb {
    border-radius: 10px;
    background-color: rgba($color: #3659f3, $alpha: 0.8)
  }
}
</style>
